<template>
  <div>
    <div class="page-header">
      <h1 class="title">{{labels_name}}</h1>
    </div>
    <div class="index-box">
      <div class="content-head">
        <a-row align="middle">
          <a-col span="12">
            <a-popconfirm title="确定要解绑当前所选住户?" @confirm="removeBindUser()">
              <a-button :disabled="$common.isEmpty(selectedRowKeys)">解绑</a-button>
            </a-popconfirm>
          </a-col>
          <a-col span="12">
            <a-input-search placeholder="请输入住户姓名或手机号" enterButton @search="onSearch"/>
          </a-col>
        </a-row>
      </div>
      <div class="content-body">
        <s-table ref="table" :columns="columns" :data="dataSource" :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" rowKey="id" :loading="loading">
          <template slot="operation" slot-scope="text,record">
            <a-dropdown>
              <a class="ant-dropdown-link" href="javascript:void(0);">操作 <a-icon type="down" /></a>
              <a-menu slot="overlay" @click="operation($event,record)">
                <a-menu-item key="1">
                  <a-popconfirm title="确定要解绑当前所选住户?" @confirm="removeBindUser([record.id])">
                    <a href="javascript:void(0);">解绑</a>
                  </a-popconfirm>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>
        </s-table>
      </div>
    </div>
  </div>
</template>

<script>
  import { ACCESS_TOKEN } from '@/store/mutation-types'
  import {STable} from '@/components'
  export default {
    name: 'data_labels_bindList',
    data() {
      return {
        token:this.$ls.get(ACCESS_TOKEN),
        loading:false,
        columns:[{ title:'姓名', dataIndex:'name' }, { title:'手机号', dataIndex:'phone' }, { title: '所属小区', dataIndex:'bd_name' }, { title: '操作', dataIndex:'operation', scopedSlots:{customRender:'operation'} }],
        queryParam:{},
        dataSource:parameter => {
          return this.getList(Object.assign(parameter, this.queryParam))
            .then(res => {
              return res
            })
        },
        selectedRowKeys: [],
        id:'', // 标签id
        labels_name:''
      }
    },
    components:{STable},
    created() {
      let { id } = this.$route.params;
      this.id = Number(id);
      if(isNaN(this.id)) this.$router.go(-1);
    },
    methods:{
      // 获取绑定住户数据
      getList(param) {
        return new Promise((resolve, reject) => {
          this.loading = true;
          this.axios({
            method:'post',
            url:'/labels/getBindList',
            data:Object.assign(param,{token:this.token,id:this.id})
          }).then(res => {
            this.labels_name = `绑定列表（${res.data.labels_name}）`;
            resolve(res.data);
          }).catch(err => {
            this.$message.error('服务器发生错误...',2);
          }).finally(() => {
            this.loading = false;
          });
        });
      },
      // 住户筛选
      onSearch(val) {
        this.queryParam['search'] = val;
        this.$refs.table.refresh(true);
      },
      onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
      },
      // 住户操作
      operation({ key },info) {  },
      // 解绑住户
      removeBindUser(ids = this.selectedRowKeys) {
        this.axios({
          method:'post',
          url:'/labels/removeBindUser',
          data:{token:this.token,ids},
        }).then(res => {
          if(res.code === 0){
            this.$message.success(res.msg,2);
            this.$refs.table.refresh();
          }else this.$message.warning(res.msg,2);
        }).catch(err => {
          this.$message.error('服务器发生错误...',2);
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .index-box{
    background: #ffffff;
    padding: 25px;
    box-sizing: border-box;
    .content-body{
      padding-top:20px;
    }
  }
  .page-header {
    background: #fff;
    padding: 16px 32px 0;
    border-bottom: 1px solid #e8e8e8;
    .title {
      font-size: 20px;
      font-weight: 500;
      line-height: 28px;
      color: rgba(0, 0, 0, 0.85);
      margin-bottom: 16px;
      flex: auto;
    }
  }
</style>